<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>管理员登录</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link rel="shortcut icon" href="../src/img/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="../src/css/layui.css">
    <style rel="stylesheet">
        body {
            margin: 0px;
            padding: 0px;
        }

        #header {
            width: 100%;
            height: 800px;
            position: relative;
            background-color: #ccc;
        }

        #logo {
            width: 200px;
            height: 80px;
            background-image: url(../src/img/login/logo.png);
            position: absolute;
            top: 60px;
            left: 60px;
            z-index: 1;
        }

        #login {
            width: 480px;
            padding: 10px;
            background-color: #ccc;
            position: absolute;
            top: 200px;
            right: 100px;
        }

        #test {
            width: 100%;
            height: 800px;
            position: absolute;
            background-image: url(../src/img/login/slider-overlay.png);
        }

        #header .picture ul li img {
            width: 100%;
            height: 800px;
        }

        #header .picture ul li {
            display: none;
            position: absolute;
        }

        /* #header .picture ul .first { display: block; }*/

        #header .point {
            width: 50px;
            height: 15px;
            position: absolute;
            bottom: 30px;
            right: 200px;
            z-index: 1;
        }

        #header .point ul {
            list-style: none;
            height: 20px;
        }

        #header .point ul li {
            float: left;
            width: 14px;
            height: 14px;
            background: url(../src/img/login/icons.png) -22px -125px;
        }

        #header .point ul li.cur {
            background-position: -10px -125px;
        }

        #footer {
            width: 100%;
            height: 50px;
            /*position: relative;*/
        }

        #footer p {
            line-height: 50px;
        }

    </style>
</head>

<body>
<div id="header" class="layui-row">


    <div class="picture layui-col-md12">
        <ul class="layui-row">
            <li class="first layui-col-md12"><a href="#"><img src="../src/img/login/slide2.jpg"></a></li>
            <li class="layui-col-md12"><a href="#"><img src="../src/img/login/slide1.jpg"></a></li>
            <li class="layui-col-md12"><a href="#"><img src="../src/img/login/slide3.jpg"></a></li>
        </ul>
    </div>

    <div class="point">
        <ul>
            <li class="cur"></li>
            <li></li>
            <li></li>
        </ul>
    </div>

    <div id="logo">

    </div>
    <div id="test">
    </div>

    <div id="login">
        <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
            <ul class="layui-tab-title">
                <li class="layui-this">
                    管理登录
                </li>
            </ul>
            <div class="layui-tab-content">
                <div class="layui-tab-item layui-show" id="managerlogin">

                    <form class="layui-form" action="../login/managerLogin" method="post">

                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 30px">账户</label>
                            <div class="layui-input-inline" style="width: 390px">
                                <input type="text" name="empId" required lay-verify="required" placeholder="请输入工号" autocomplete="off"
                                       class="layui-input">
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 30px">密码</label>
                            <div class="layui-input-inline" style="width: 390px">
                                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off"
                                       class="layui-input">
                            </div>
                            <!--<div class="layui-form-mid layui-word-aux">辅助文字</div>-->
                        </div>

                        <div class="layui-form-item">
                            <label class="layui-form-label" style="width: 30px">部门</label>
                            <div class="layui-input-inline" style="width: 390px">
                                <select name="deptId" lay-verify="required">
                                    <option>——请选择部门——</option>
                                    <option value="rsp">人事部</option>
                                    <option value="rsf">财务部</option>
                                    <option value="rso">运营部</option>
                                </select>
                            </div>
                        </div>

                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button type="reset" class="layui-btn layui-btn-primary" style="width: 100px">重置</button>
                                <button class="layui-btn" lay-submit lay-filter="formDemo" style="background-color: #5FB878;width: 100px">登录</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
<div id="footer">
    <center>
        <p>Copyright &copy; 2017 RingSpace 版权所有| 翻版必究</p>
    </center>
</div>

<script src="../src/js/jquery-3.2.1.min.js "></script>
<script src="../src/js/layui.js "></script>
<script src="../src/js/lay/modules/form.js "></script>
<script src="../src/js/area.js "></script>

<!--省市级联-->
<script>
    //初始数据
    var areaData = Area;
    var $form;
    var form;
    var $;
    layui.use(['jquery', 'form'], function () {
        $ = layui.jquery;
        form = layui.form();
        $form = $('form');
        loadProvince();
    });

    //加载省数据
    function loadProvince() {
        var proHtml = '';
        for (var i = 0; i &lt; areaData.length; i++) {
            proHtml += '&lt;option value="' + areaData[i].provinceCode + '_' + areaData[i].mallCityList.length + '_' + i + '">' + areaData[i].provinceName + '</option>';
        }
        //初始化省数据
        $form.find('select[name=province]').append(proHtml);
        form.render();
        form.on('select(province)', function (data) {
            var value = data.value;
            var d = value.split('_');
            var code = d[0];
            var count = d[1];
            var index = d[2];
            if (count > 0) {
                loadCity(areaData[index].mallCityList);
            } else {
                $form.find('select[name=city]').parent().hide();
            }
        });
    }

    //加载市数据
    function loadCity(citys) {
        var cityHtml = '';
        for (var i = 0; i &lt; citys.length; i++) {
            cityHtml += '&lt;option value="' + citys[i].cityCode + '_' + citys[i].mallAreaList.length + '_' + i + '">' + citys[i].cityName + '</option>';
        }
        $form.find('select[name=city]').html(cityHtml).parent().show();
        form.render();
        loadArea(citys[0].mallAreaList);
        form.on('select(city)', function (data) {
            var value = data.value;
            var d = value.split('_');
            var code = d[0];
            var count = d[1];
            var index = d[2];
            if (count > 0) {
                loadArea(citys[index].mallAreaList);
            } else {
                $form.find('select[name=area]').parent().hide();
            }
        });
    }

    //加载县/区数据
    function loadArea(areas) {
        var areaHtml = '';
        for (var i = 0; i &lt; areas.length; i++) {
            areaHtml += '&lt;option value="' + areas[i].areaCode + '">' + areas[i].areaName + '</option>';
        }
        $form.find('select[name=area]').html(areaHtml).parent().show();
        form.render();
        form.on('select(area)', function (data) {
            //console.log(data);
        });
    }

    //设置省市区
    function setArea(area) {
        var p = '';
        var c = '';
        var a = '';
        for (var i = 0; i &lt; areaData.length; i++) {
            var provinceName = areaData[i].provinceName;
            var provinceCode = areaData[i].provinceCode;
            var mallCityList = areaData[i].mallCityList;
            for (var j = 0; j &lt; mallCityList.length; j++) {
                var cityName = mallCityList[j].cityName;
                var cityCode = mallCityList[j].cityCode;
                var mallAreaList = mallCityList[j].mallAreaList;
                for (var k = 0; k &lt; mallAreaList.length; k++) {
                    if (area == mallAreaList[k].areaName) {
                        var areaCode = mallAreaList[k].areaCode;
                        a = areaCode;
                        c = cityCode + '_' + mallAreaList.length + "_" + j;
                        p = provinceCode + "_" + mallCityList.length + "_" + i;
                    }
                }
            }
        }
        console.log('p:' + p + "====c:" + c + "=====a:" + a);

        $('select[name=province]')[0].value = p;
        $('select[name=city]').val(c);
        $('select[name=area]').val(a);
        layui.use('form', function () {
            var form = layui.form();
            form.render();
        });
    }

    setArea('丰台区');

</script>
<!--选项卡-->
<script>
    layui.use('element', function () {
        var $ = layui.jquery,
            element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块

        //触发事件
        var active = {
            tabAdd: function () {
                //新增一个Tab项
                element.tabAdd('demo', {
                    title: '新选项' + (Math.random() * 1000 | 0) //用于演示
                    ,
                    content: '内容' + (Math.random() * 1000 | 0),
                    id: new Date().getTime() //实际使用一般是规定好的id，这里以时间戳模拟下
                })
            },
            tabDelete: function (othis) {
                //删除指定Tab项
                element.tabDelete('demo', '44'); //删除：“商品管理”


                othis.addClass('layui-btn-disabled');
            },
            tabChange: function () {
                //切换到指定Tab项
                element.tabChange('demo', '22'); //切换到：用户管理
            }
        };

        $('.site-demo-active').on('click', function () {
            var othis = $(this),
                type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });

        //Hash地址的定位
        var layid = location.hash.replace(/^#test=/, '');
        element.tabChange('test', layid);

        element.on('tab(test)', function (elem) {
            location.hash = 'test=' + $(this).attr('lay-id');
        });

    });

</script>

<script type="text/javascript">
    $(function () {
        var i = 0;
        var timer;
        $('.picture li').eq(0).show().siblings().hide();

        showTime();

        $('.point li').hover(function () {
            i = $(this).index();
            Show();
            clearInterval(timer);
        }, function () {
            showTime();
        });

        function showTime() {
            timer = setInterval(function () {
                Show();
                i++;
                if (i == 3) {
                    i = 0;
                }
            }, 4000);
        }

        function Show() {
            $('.picture li').eq(i).fadeIn(1000).siblings('.picture li').fadeOut(1000);
            $(".point li").eq(i).addClass("cur").siblings().removeClass("cur");
        }
    });

</script>

</body>

</html>
